<!DOCTYPE html>
<html>
	<head>
		<title>个人页面</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/userProfiles.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>
	</head>
	<body>
		<div class="container bg"  style="background-image: url('/img/user/bg.jpeg');">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span id="nums">1</span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span id="fans"></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-primary ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						<dl class="list" render-loop="list">
							<dd>
								<a data-href="travelContent.html?id=">
									<img  render-src="list.coverUrl" render-key="list.id" render-fun="getParentHref">
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right">
						 				<span >0</span> <i class="fa fa-thumbs-o-up"></i></span>
									</p>
								</a>
								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
				
					<div render-loop="list">
						<div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star" render-key="list.starNum" render-fun="getStarNum">

								</span>

								<span class="comment-date" render-html="list.createTime"></span>
								<div class="comment-content">
									<a href="strategyComment.html">
										<p render-html="list.content"></p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgArr">
									<li>
										<img  render-src="list.imgArr.self">
									</li>

								</ul>

								<div class="comment-link">
									<a data-href="strategyCatalogs.html?id=" render-key="list.strategy.id" render-fun="getHref">
										<img  render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>
	<script>
       /* var currentPage = 1;
        var travelData=[];
        var pages;
        var params = getParams();


		function query1() {
            $.get("/users/" + params.id + "/comments", {currentPage: currentPage}, function (data) {
                $.merge(travelData, data.list);
                var json = {
                    list: travelData
                };
                //回显星星
                $("#comments").renderValues(json, {
                    getStarNum: function (item, value) {
                        var temp = "";
                        for (var i = 0; i < value; i++) {
                            temp += '<i class="fa fa-star"></i>';
                        }
                        for (var i = 0; i < 5 - value; i++) {
                            temp += '<i class="fa fa-star-o"></i>';
                        }
                        $(item).html(temp);
                    },
                    getHref: function (item, value) {
                        var url = $(item).data("href");
                        $(item).attr("href", url + value);
                    }

                });

                //图片点击
                $(".comment-img img").click(function () {
                    $(document).dialog({
                        titleShow: false,
                        overlayClose: true,
                        content: '<div style="text-align: center;"><img width="100%" src="' + $(this).attr('src') + '"></div>'
                    });
                });

                pages = data.pages;
            });

        }

        query1();

        $(window).scroll(function () {
            if ($(document).scrollTop() + $(window).height() >= $(document).height()-1) {//有时候会有像素偏差,需要根据需求适当的减少文档高度
                //判断当前页是否小于或等于总页数,如果是,就执行查询
                if (pages >= currentPage) {
                    //执行分页查询
                    query1();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已经到底了',
                        autoClose: 1500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });*/


        $(function () {
            var currentPage = 1;
            var travelData=[];
            var pages;
            var params = getParams();
			if(params){
                $.get("/users/" + params.id, function (data) {
                    $(".bg").renderValues(data);
                    $(".bg").css("background-image",'url('+data.coverImgUrl+')')
                });
			}


            function query() {

                $.get("/users/" + params.id + "/travels", {currentPage: currentPage}, function (data) {
                    $.merge(travelData, data.list);
                    var json = {
                        list: travelData
                    };
                    $("#travels").renderValues(json, {
                        getParentHref: function (item, value) {
                            var url = $(item).parent().data("href");
                            $(item).parent().attr("href", url + value);

                        }
                    });
                    pages = data.pages;
                });
                currentPage++;
            }
			query();

            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()-1) {//有时候会有像素偏差,需要根据需求适当的减少文档高度
                    //判断当前页是否小于或等于总页数,如果是,就执行查询
                    if (pages >= currentPage) {
                        //执行分页查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });









            function queryNums(){
                $.get("/users",{userId:params.id},function(data){
                    $("#nums").html(data.nums);
                    $("#fans").html(data.fans);
				})
			}

			//默认查询一次
			queryNums();

            //获取当前用户的登录信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            if(user) {
                if (params.id == user.id) {
                    $("#followBtn").css("display", "none");
                    $("#letterBtn").css("display", "none");
                }
            }
            if(user){
                function queryIsRelation() {
                    $.get("/users/"+user.id+"/"+params.id,function (data) {
                      if(data){
                          $("#followBtn").html("取消关注");
                      }else{
                          $("#followBtn").html("关注");
					  }
                    })
                }
            	queryIsRelation();
			}

            $("#followBtn").click(function () {
                //如果当前用户没有登陆,则返回登陆页面
                if (user == null) {
                    window.location.href="/login.html"
                }
                $.get("/users/"+user.id+"/"+params.id,function (data) {
                    if(data){
                        $.ajax({
                            url:'/users/'+user.id+'?followerId='+params.id,
                            method:'delete',
                            success:function () {
                                queryNums();
                            }
                        });
                        $("#followBtn").html("关注");
					}else{
                        $.post("users/"+user.id,{followerId:params.id},function (data) {
                            if(data.success){
                                queryNums();
                            }else{
                                alert(data.msg);
                            }
                        });
                        $("#followBtn").html("取消关注");
					}

                });
            });
        })
	</script>
	</body>
</html>